<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>课时28_MVC模式</title>
</head>

<body>
    <div class="course-content">
        <div class="current-component">
            <div class="text markdown-body">
                <div>
                    <h1
                        style="border:0px;margin:0px 0px 10px;padding:0px;font-size:2.1em;font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif;white-space:normal;background-color:rgb(255,255,255);">
                        MVC 模式</h1>

                    <p
                        style="border:0px;margin-top:0px;margin-bottom:0px;padding:0px;line-height:2em;font-size:13px;font-family:'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;color:rgb(51,51,51);white-space:normal;background-color:rgb(255,255,255);">
                        MVC 模式代表 Model-View-Controller（模型-视图-控制器） 模式。这种模式用于应用程序的分层开发。</p>

                    <ul class="list list-paddingleft-2" style="list-style-type:none;">
                        <li>
                            <p><strong>Model（模型）</strong>&nbsp;- 模型代表一个存取数据的对象或 JAVA POJO。它也可以带有逻辑，在数据变化时更新控制器。</p>
                        </li>
                        <li>
                            <p><strong>View（视图）</strong>&nbsp;- 视图代表模型包含的数据的可视化。</p>
                        </li>
                        <li>
                            <p><strong>Controller（控制器）</strong>&nbsp;- 控制器作用于模型和视图上。它控制数据流向模型对象，并在数据变化时更新视图。它使视图与模型分离开。
                            </p>
                        </li>
                    </ul>
                    <h2
                        style="border:0px;margin:2px 0px;padding:0px;font-size:1.8em;line-height:1.8em;color:rgb(51,51,51);font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif;white-space:normal;background-color:rgb(255,255,255);">
                        实现</h2>

                    <p
                        style="border:0px;margin-top:0px;margin-bottom:0px;padding:0px;line-height:2em;font-size:13px;font-family:'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;color:rgb(51,51,51);white-space:normal;background-color:rgb(255,255,255);">
                        我们将创建一个作为模型的&nbsp;<em>Student</em>&nbsp;对象。<em>StudentView</em>&nbsp;是一个把学生详细信息输出到控制台的视图类，<em>StudentController</em>是负责存储数据到&nbsp;<em>Student</em>&nbsp;对象中的控制器类，并相应地更新视图&nbsp;<em>StudentView</em>。
                    </p>

                    <p
                        style="border:0px;margin-top:0px;margin-bottom:0px;padding:0px;line-height:2em;font-size:13px;font-family:'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;color:rgb(51,51,51);white-space:normal;background-color:rgb(255,255,255);">
                        <em>MVCPatternDemo</em>，我们的演示类使用&nbsp;<em>StudentController</em>&nbsp;来演示 MVC 模式的用法。
                    </p>

                    <p><img alt="" src="https://developer.aliyun.com/files/course/2017/09-24/1315208c36d1731943.jpg">
                    </p>

                    <h2
                        style="border:0px;margin:2px 0px;padding:0px;font-size:1.8em;line-height:1.8em;color:rgb(51,51,51);font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif;white-space:normal;background-color:rgb(255,255,255);">
                        步骤 1</h2>

                    <p
                        style="border:0px;margin-top:0px;margin-bottom:0px;padding:0px;line-height:2em;font-size:13px;font-family:'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;color:rgb(51,51,51);white-space:normal;background-color:rgb(255,255,255);">
                        创建模型。</p>

                    <p
                        style="border:0px;margin-top:0px;margin-bottom:0px;padding:0px;line-height:2em;font-size:13px;font-family:'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;color:rgb(51,51,51);white-space:normal;background-color:rgb(255,255,255);">
                        <em>Student.java</em>
                    </p>

                    <pre><code class="language-java">public class Student {
   private String rollNo;
   private String name;
   public String getRollNo() {
      return rollNo;
   }
   public void setRollNo(String rollNo) {
      this.rollNo = rollNo;
   }
   public String getName() {
      return name;
   }
   public void setName(String name) {
      this.name = name;
   }}</code></pre>

                    <h2
                        style="border:0px;margin:2px 0px;padding:0px;font-size:1.8em;line-height:1.8em;color:rgb(51,51,51);font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif;white-space:normal;background-color:rgb(255,255,255);">
                        步骤 2</h2>

                    <p
                        style="border:0px;margin-top:0px;margin-bottom:0px;padding:0px;line-height:2em;font-size:13px;font-family:'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;color:rgb(51,51,51);white-space:normal;background-color:rgb(255,255,255);">
                        创建视图。</p>

                    <p
                        style="border:0px;margin-top:0px;margin-bottom:0px;padding:0px;line-height:2em;font-size:13px;font-family:'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;color:rgb(51,51,51);white-space:normal;background-color:rgb(255,255,255);">
                        <em>StudentView.java</em>
                    </p>

                    <pre><code class="language-java">public class StudentView {
   public void printStudentDetails(String studentName, String studentRollNo){
      System.out.println("Student: ");
      System.out.println("Name: " + studentName);
      System.out.println("Roll No: " + studentRollNo);
   }}</code></pre>

                    <h2
                        style="border:0px;margin:2px 0px;padding:0px;font-size:1.8em;line-height:1.8em;color:rgb(51,51,51);font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif;white-space:normal;background-color:rgb(255,255,255);">
                        步骤 3</h2>

                    <p
                        style="border:0px;margin-top:0px;margin-bottom:0px;padding:0px;line-height:2em;font-size:13px;font-family:'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;color:rgb(51,51,51);white-space:normal;background-color:rgb(255,255,255);">
                        创建控制器。</p>

                    <p
                        style="border:0px;margin-top:0px;margin-bottom:0px;padding:0px;line-height:2em;font-size:13px;font-family:'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;color:rgb(51,51,51);white-space:normal;background-color:rgb(255,255,255);">
                        <em>StudentController.java</em>
                    </p>

                    <pre><code class="language-java">public class StudentController {
   private Student model;
   private StudentView view;

   public StudentController(Student model, StudentView view){
      this.model = model;
      this.view = view;
   }

   public void setStudentName(String name){
      model.setName(name);		
   }

   public String getStudentName(){
      return model.getName();		
   }

   public void setStudentRollNo(String rollNo){
      model.setRollNo(rollNo);		
   }

   public String getStudentRollNo(){
      return model.getRollNo();		
   }

   public void updateView(){				
      view.printStudentDetails(model.getName(), model.getRollNo());
   }	}</code></pre>

                    <h2
                        style="border:0px;margin:2px 0px;padding:0px;font-size:1.8em;line-height:1.8em;color:rgb(51,51,51);font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif;white-space:normal;background-color:rgb(255,255,255);">
                        步骤 4</h2>

                    <p
                        style="border:0px;margin-top:0px;margin-bottom:0px;padding:0px;line-height:2em;font-size:13px;font-family:'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;color:rgb(51,51,51);white-space:normal;background-color:rgb(255,255,255);">
                        使用&nbsp;<em>StudentController</em>&nbsp;方法来演示 MVC 设计模式的用法。</p>

                    <p
                        style="border:0px;margin-top:0px;margin-bottom:0px;padding:0px;line-height:2em;font-size:13px;font-family:'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;color:rgb(51,51,51);white-space:normal;background-color:rgb(255,255,255);">
                        <em>MVCPatternDemo.java</em>
                    </p>

                    <pre><code class="language-java">public class MVCPatternDemo {
   public static void main(String[] args) {

      //从数据可获取学生记录
      Student model  = retriveStudentFromDatabase();

      //创建一个视图：把学生详细信息输出到控制台
      StudentView view = new StudentView();

      StudentController controller = new StudentController(model, view);

      controller.updateView();

      //更新模型数据
      controller.setStudentName("John");

      controller.updateView();
   }

   private static Student retriveStudentFromDatabase(){
      Student student = new Student();
      student.setName("Robert");
      student.setRollNo("10");
      return student;
   }}</code></pre>

                    <h2
                        style="border:0px;margin:2px 0px;padding:0px;font-size:1.8em;line-height:1.8em;color:rgb(51,51,51);font-family:'Open Sans', 'Helvetica Neue', Helvetica, Arial, STHeiti, 'Microsoft Yahei', sans-serif;white-space:normal;background-color:rgb(255,255,255);">
                        步骤 5</h2>

                    <p
                        style="border:0px;margin-top:0px;margin-bottom:0px;padding:0px;line-height:2em;font-size:13px;font-family:'Microsoft Yahei', 'Helvetica Neue', Helvetica, Arial, sans-serif;color:rgb(51,51,51);white-space:normal;background-color:rgb(255,255,255);">
                        验证输出。</p>

                    <pre><code class="language-java">Student:
Name: Robert
Roll No: 10
Student:
Name: John
Roll No: 10</code></pre>

                    <p>&nbsp;</p>
                </div>
            </div>
        </div>
    </div>
</body>

</html>